<template>
  <div class="wrapper" style="overflow: hidden;">
    <parallax
      class="page-header header-filter img-transition"
      :style="headerStyle"
    >
      <!-- 轮播文字内容 start -->
      <HeadLine :style="(headLineStyle, 'z-index: 1;')">
        <template slot="top">
          {{ headerTitleList[value].title1 }}
        </template>
        <template slot="centre">
          {{ headerTitleList[value].title2 }}
        </template>
        <template slot="down">
          {{ headerTitleList[value].title3 }}
        </template>
      </HeadLine>
      <!-- 轮播文字内容 end -->

      <!-- 轮播左右箭头 start -->
      <div class="switchButton">
        <i
          class="material-icons leftStyle"
          @click="() => (resetTheDecelerator(), left())"
          >keyboard_arrow_left</i
        >
        <i
          class="material-icons rightStyle"
          @click="() => (resetTheDecelerator(), right())"
          >keyboard_arrow_right</i
        >
      </div>
      <!-- 轮播左右箭头 start -->
    </parallax>

    <div class="main main-raised">
      <!-- 轮播按钮 start -->
      <div class="shuffling-button-box">
        <block v-for="(item, index) in imageList" :key="item">
          <div
            @click="() => (resetTheDecelerator(), (value = index))"
            :class="item == imageList[value] ? 'highlight btn' : 'btn'"
          ></div>
        </block>
      </div>
      <!-- 轮播按钮 end -->

      <div class="section section-basic section-divider">
        <div class="container-flex">
          <GongSiJieShao>
            <template slot="mainTitle">
              ABOUT US
            </template>
            <template slot="mainInfo">
              公司介绍
            </template>
          </GongSiJieShao>
        </div>
      </div>

      <div class="section section-basic section-divider">
        <div class="container-flex">
          <MainTitle>
            <template slot="mainTitle">
              NEW PROJECTS
            </template>
            <template slot="mainInfo">
              最新案例
            </template>
          </MainTitle>
          <GongGe></GongGe>
        </div>
      </div>

      <div class="section section-basic section-divider">
        <div class="container-flex">
          <MainTitle>
            <template slot="mainTitle">
              OUR CLIENTS
            </template>
            <template slot="mainInfo">
              我们的客户
            </template>
          </MainTitle>
          <Customer></Customer>
        </div>
      </div>

      <div class="section-tabs">
        <div class="container"><tabs></tabs></div>
      </div>
      <div class="section section-white">
        <div class="container"><nav-pills></nav-pills></div>
      </div>
      <div class="section section-notifications">
        <div class="container">
          <!-- <div class="title"><h3>Notifications</h3></div> -->
        </div>
        <notifications></notifications>
      </div>
      <div class="section">
        <div class="container"><typography-images></typography-images></div>
      </div>
      <div class="section section-javascript">
        <div class="container">
          <javascript-components></javascript-components>
        </div>
      </div>
    </div>
    <XuanFuCaoZuoKuai></XuanFuCaoZuoKuai>
  </div>
</template>

<script>
import HeadLine from "./components/HeadLine.vue";
import GongSiJieShao from "./components/GongSiJieShao";
import MainTitle from "./components/MainTitle";

import Customer from "./components/Customer";
import GongGe from "./components/GongGe";
import XuanFuCaoZuoKuai from "./components/XuanFuCaoZuoKuai";
import Tabs from "./components/TabsSection";

// import NavPills from "./components/NavPillsSection";
// import Notifications from "./components/NotificationsSection";
// import TypographyImages from "./components/TypographyImagesSection";
// import JavascriptComponents from "./components/JavascriptComponentsSection";
// import { LoginCard } from "@/components";
let carousel1 = require("@/assets/images/banner1.jpg"),
  carousel2 = require("@/assets/images/banner2.jpg"),
  carousel3 = require("@/assets/images/banner3.jpg"),
  carousel4 = require("@/assets/images/banner4.jpg");
export default {
  components: {
    HeadLine,
    MainTitle,
    GongSiJieShao,
    Customer,
    GongGe,
    XuanFuCaoZuoKuai,
    Tabs
    // NavPills,
    // Notifications,
    // TypographyImages,
    // JavascriptComponents,

    // LoginCard
  },
  name: "index",
  bodyClass: "index-page",
  props: {},
  data() {
    return {
      headerTitleList: [
        {
          key: 1,
          title1: "PARTNER",
          title2: "WORK MORE THAN WORK",
          title3: "合作即是成功的开始"
        },
        {
          key: 2,
          title1: "SEO整合营销",
          title2: "PC端、移动端双排名",
          title3: "OPTIMIZATION"
        },
        {
          key: 3,
          title1: "XX互联",
          title2: "您身边的网络运营服务管家",
          title3: "INTERCONNECTION"
        },
        {
          key: 4,
          title1: "H5响应式网站建设",
          title2: "PC、平板、手机、微信四网合一",
          title3: "RESPONSE"
        }
      ],
      headLineStyle: { zIndex: 999, transition: "all 5s", opacity: 1 },
      firstname: null,
      email: null,
      password: null,
      leafShow: false,
      headerStyle: { backgroundImage: `url(${carousel1})` },
      imageList: [carousel1, carousel2, carousel3, carousel4],
      timer: null,
      value: 0
    };
  },
  watch: {
    value(v) {
      this.headerStyle.backgroundImage = `url(${this.imageList[v]})`;
    }
  },

  methods: {
    //重置延时器
    resetTheDecelerator() {
      clearInterval(this.timer);
      this.timer = setInterval(this.timelog, 4000);
    },
    timelog() {
      this.value++;
      if (this.value == this.imageList.length) this.value = 0;
    },
    left() {
      this.value--;
      if (this.value < 0) this.value = this.imageList.length - 1;
    },
    right() {
      this.value++;
      if (this.value == this.imageList.length) this.value = 0;
    },

    leafActive() {
      if (window.innerWidth < 768) {
        this.leafShow = false;
      } else {
        this.leafShow = true;
      }
    }
  },

  computed: {
    signupImage() {
      return {
        backgroundImage: `url(${this.signup})`
      };
    }
  },
  mounted() {
    this.leafActive();
    this.timer = setInterval(this.timelog, 4000);
    window.addEventListener("resize", this.leafActive);
  },
  beforeDestroy() {
    clearInterval(this.timer);
    window.removeEventListener("resize", this.leafActive);
  }
};
</script>
<style lang="scss">
.section-divider {
  border-bottom: #949494 0.01rem solid;
  .container-flex {
    display: flex;
    flex-direction: column;
    align-items: center;
  }
}
.shuffling-button-box {
  position: absolute;
  top: -2.5rem;
  width: 100%;
  text-align: center;
  .btn {
    width: 6rem;
    margin: 0 0.3rem;
    height: 0.3rem;
    display: inline-block;
    background: rgba(255, 255, 255, 0.8);
    border: rgba(255, 255, 255, 0.8) 0.2rem solid;
    cursor: pointer;
  }
  @media all and (max-width: 991px) {
    .btn {
      width: 3rem;
    }
  }
}
.highlight {
  background: rgba(0, 0, 0, 0.6) !important;
  border: rgba(0, 0, 0, 0.6) 0.2rem solid !important;
  box-shadow: 0.1rem 0.1rem 0.3rem rgba(0, 0, 0, 0.6) !important;
  transition: all 0.5s;
}
.img-transition {
  -webkit-transition: background-image 0.5s;
  -moz-transition: background-image 0.5s;
  -ms-transition: background-image 0.5s;
  transition: background-image 0.5s;
}
.brand {
  h3 {
    -webkit-transition: all 1s;
    -moz-transition: all 1s;
    -ms-transition: all 1s;
    transition: all 1s;
  }
}
.switchButton {
  .leftStyle,
  .rightStyle {
    font-size: 3rem;
    position: absolute;
    color: rgba(255, 255, 255, 0.8);
    background-color: rgba(0, 0, 0, 0.2);
    cursor: pointer;
  }
  .leftStyle:hover,
  .rightStyle:hover {
    background-color: rgba(0, 0, 0, 0.5);
  }

  .leftStyle {
    left: 0;
    border-radius: 0 50% 50% 0;
  }
  .rightStyle {
    right: 0;
    border-radius: 50% 0 0 50%;
  }
  @media all and (max-width: 991px) {
    .leftStyle {
      font-size: 4.4rem;
    }
    .rightStyle {
      font-size: 4.4rem;
    }
  }
}
.section-download {
  .md-button + .md-button {
    margin-left: 5px;
  }
}

@media all and (min-width: 991px) {
  .btn-container {
    display: flex;
  }
}
.mainTitle {
  color: #434343;
  font-size: 3rem;
  line-height: 72px;
  letter-spacing: 0.18em;
  font-family: "MyriadPro-LightCond" !important;
  font-weight: 100;
  font-stretch: ultra-condensed;
  width: 100%;
  text-align: center;
}
.underline {
  background: #b61114;
  margin: 0.5rem auto 1rem;
  width: 1.8rem;
  height: 0.15rem;
}
.mainInfo {
  margin: 0 !important;
  color: #434343;
  font-weight: 300;
  border-bottom: 0.1rem solid #bfbfbf;
}
</style>
